<template>
  <div>
    <div class="item" v-for="(item,index) in mockData.top.num" :key="index">
      <div class="item-in">
        <div class="item-l">
          <p class="p1">价值238元</p>
          <p class="p2">8寸蛋糕兑换券</p>
          <p class="p3">8 inch cake exchange certificate</p>
        </div>
        <div class="item-r">
          <btn-convert
            :dataMain="dataMain"
            itemData="top"
            @convertUseOut="convertUse"
          ></btn-convert>
        </div>
      </div>
      <div class="item-sec">
        <p>来自998元蛋糕券大礼包</p>
        <p>有效期至{{dateFormat(mockData.top.time)}}</p>
      </div>
      <div class="th-line th-line-sec"></div>
    </div>
    <div class="item" v-for="(item,index) in mockData.vip.num" :key="index">
      <div class="item-in">
        <div class="item-l">
          <p class="p1">价值238元</p>
          <p class="p2">8寸蛋糕兑换券</p>
          <p class="p3">8 inch cake exchange certificate</p>
        </div>
        <div class="item-r">
          <btn-convert
            :dataMain="dataMain"
            itemData="vip"
            @convertUseOut="convertUse"
          ></btn-convert>
        </div>
      </div>
      <div class="item-sec">
        <p>来自398元蛋糕券大礼包</p>
        <p>有效期至{{dateFormat(mockData.vip.time)}}</p>
      </div>
      <div class="th-line th-line-sec"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';
  import BtnConvert from '@/components/common/BtnConvert';

  export default {
    name: 'ConvertItem',
    components: {BtnConvert},
    data() {
      return {
        dataMain: {
          text: '去使用',
          textColor: '#BB7347'
        }
      };
    },
    methods: {
      convertUse(convert) {
        //  去使用兑换券
        this.$router.push({
          name: 'convertList',
          query: {convert: convert}
        });
      },
      dateFormat(val) {
        return Moment(val * 1000).format('YYYY年MM月DD日');
      }
    },
    props: {
      mockData: {
        type: Object,
        required: true
      }
    },
    created() {
    }
  }
  ;
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .item {
    padding: 2vw 4vw;
    .item-in {
      height 24.125vw
      background url("http://dncake.oss-cn-hangzhou.aliyuncs.com/icon/convert.png") no-repeat
      background-size contain
      flex-x(, stretch)
      .item-l {
        flex: 3
        flex-y(space-between)
        .p1 {
          word-vw(12px, #999);
          align-self: flex-start;
          padding-left: 5vw;
          padding-top: 2vw;
        }
        .p2 {
          word-vw(16px, #BB7347)
          margin-top: 4vw;
        }
        .p3 {
          word-vw(6px, #999)
          margin-bottom: 8vw;
        }
      }
      .item-r {
        flex: 2
        flex-x(center)
      }
    }
    .item-sec {
      flex-x()
      p {
        word-vw(12px, #999)
      }
    }
  }

</style>
